<template>
    <div class="container">
        <div class="container_right">
            <div class="title">
                <div>请登录</div>
            </div>
            <div>
                <div class="input1">
                    <input v-model="userId" type="text" placeholder="账号" />
                </div>

                <div class="input2">
                    <input v-model="password" type="password" placeholder="密码" />
                </div>
            </div>
            <div class="agreement">
                <el-checkbox class="custom-checkbox" v-model="agreementChecked">已阅读并同意账号用户协议和隐私政策</el-checkbox>
            </div>
            <div class="btn">
                <button type="button" @click="login">登录</button>
            </div>
            <div class="text">
                <a> <router-link to="/register">立即注册</router-link></a>
                <i>|</i>
                <router-link to="/home">返回首页</router-link>
            </div>
            <div class="third">
                <ul class="third_list">
                    <li v-for="(path, index) in imagePaths" :key="index">
                        <img :src="require('@/assets/images/login/' + path)" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script>


export default {
    name: "login",
    data() {
        return {
            userId: "",
            password: "",
            agreementChecked: false,
            imagePaths: [
                "alipay.png",
                "wechat.png",
                "qq.png",
                "weibo.png"
            ],
        };
    },
    methods: {
        login() {
            if (this.userId === '') {
                this.$message.error("请输入账号");
                return;
            } else if (this.password === '') {
                this.$message.error("请输入密码");
                return;
            }
            // 判断是否勾选协议
            if (this.agreementChecked) {
                // 发送登录请求
                this.$request.post('user/login', {
                    userId: this.userId,
                    password: this.password,
                })
                    .then((res) => {
                        if (res.code == "200") {
                            // 登录成功，显示成功提示信息
                            this.$message({
                                message: res.message,
                                type: "success",
                            });


                            //cookie token(session会话)


                            //1、储存token(令牌)   保存到浏览器

                            window.sessionStorage.setItem("token", res.token);
                            //2、储存user
                            window.sessionStorage.setItem(
                                "user",
                                JSON.stringify(res.user)
                            );
                            //3、跳转到后台主页 （编程式导航）
                            this.$router.push("./home"); //
                        } else if (res.code == "500") {
                            this.$message({
                                message: res.message,
                                type: "error",
                            });
                        }
                    })
                    .catch(() => {
                        // 登录失败，显示提示信息
                        this.$message({
                            message: "该登录失败",
                            type: "error",
                        });
                    });
            } else {
                // 未勾选协议，不执行登录逻辑
                this.$message({
                    message: "请同意用户协议和隐私政策！",
                    type: "error",
                });
            }
        },
    }

};
</script>
  
<style scoped>
/* 中部 */
.container {
    height: 590px;
    margin-top: 43px;
    display: flex;
    justify-content: space-evenly;
}

.container_right {
    margin-top: 40px;
    width: 420px;
    height: 500px;
    background: #fff;
    box-shadow: 0 6px 20px 0 rgba(37, 43, 50, 0.07);
    border-radius: 16px;
    padding: 0 40px;
    border: 1px solid #f9f9f9;
}

.title {
    margin-top: 40px;
    font-size: inherit;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    font-family: MicrosoftYaHeiSemibold;
    letter-spacing: 0;
    line-height: 17px;
}

.input1 {
    margin-top: 38px;
}

.input2 {
    margin-top: 28px;
}

.input1,
.input2 {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.input1 input,
.input2 input {
    background: #f9f9f9;
    width: 348px;
    height: 52px;
    border-radius: 4px;
    padding: 0 16px;
    font-family: MicrosoftYaHei;
    font-size: 15px;
    color: #828282;
}

.input1 input:focus,
.input2 input:focus {
    border: 1px solid #ff5c00;
}

.agreement {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #151515;
    text-align: center;
    line-height: 12px;
    cursor: pointer;
    margin-bottom: 10px;
}

.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #ff5c00;
    border-color: #ff5c00;
}

.custom-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #ff5c00;
}

.custom-checkbox .el-checkbox__input:hover .el-checkbox__inner {
    border-color: #ff5c00;
}

.btn button {
    display: block;
    text-align: center;
    background-image: linear-gradient(90deg, #fe5447, #ff5c00);
    box-shadow: 0 3px 8px 1px rgba(235, 28, 49, 0.22);
    border-radius: 5px;
    width: 340px;
    height: 50px;
    line-height: 50px;
    font-family: MicrosoftYaHeiSemibold;
    font-size: 18px;
    color: #fff;
}

.text {
    margin-top: 28px;
    width: 340px;
    padding: 0 75px;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #626262;
    letter-spacing: 0;
    line-height: 14px;
}

.third_list {
    margin-top: 30px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.third_list img {
    width: 35px;
    height: 35px;
}
</style>